import { Input, InputNumber, Select } from '@/components/AntdProxy';
import CommonDrawer from '@/components/CommonDrawer';
import { CrudFormLayout } from '@/components/Crud';
import PointsAndAreaChoose from '@/components/PointsAndAreaChoose';
import {
  STATE_OPTIONS,
  SUPPORT_OPTIONS,
  TYPE_OPTIONS,
} from '@/constants/enums';
import { REQUIRED } from '@/constants/rules';
import request from '@/utils/request';
import { useAsyncEffect } from 'ahooks';
import { Form, message } from 'antd';
import { useRef } from 'react';

const Save = (props) => {
  const { open, record, onCancel, onOk } = props;
  const [form] = Form.useForm();
  const mapRef = useRef();

  useAsyncEffect(() => {
    if (open && record) {
      form?.setFieldsValue(record);
    }
  }, [open, record]);

  const handleOk = async () => {
    const values = await form.validateFields();
    console.log('values', values);
    const url = record
      ? '/datas/charge/station/update'
      : '/datas/charge/station/add';
    const params = {
      ...values,
      type: 2,
    };
    if (record) {
      params.chargeStationId = record?.chargeStationId;
    }
    await request({
      url,
      method: 'POST',
      data: params,
    });
    message.success('操作成功');
    onOk?.();
  };

  return (
    <CommonDrawer
      title={record ? '编辑' : '新建'}
      open={open}
      onClose={onCancel}
      onOk={handleOk}
      afterOpenChange={(visible) => {
        if (!visible) {
          form.resetFields();
        }
      }}
      width={1200}
      destroyOnHidden
    >
      <Form form={form} layout="vertical">
        <CrudFormLayout itemMinWidth={250}>
          <Form.Item
            label="充电站名称"
            name="chargeStationName"
            rules={[REQUIRED]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="全称" name="fullName">
            <Input />
          </Form.Item>
          <Form.Item
            label="状态"
            name="state"
            rules={[REQUIRED]}
            initialValue={0}
          >
            <Select options={STATE_OPTIONS} />
          </Form.Item>
          <Form.Item label="充电站编号" name="chargeStationCode">
            <Input />
          </Form.Item>
          <Form.Item label="设备数量" name="total" initialValue={0}>
            <InputNumber />
          </Form.Item>
          <Form.Item label="充电" name="charging" initialValue={1}>
            <Select options={SUPPORT_OPTIONS} />
          </Form.Item>
          <Form.Item label="换电" name="changing" initialValue={0}>
            <Select options={SUPPORT_OPTIONS} />
          </Form.Item>
          <Form.Item label="交接" name="joining" initialValue={0}>
            <Select options={SUPPORT_OPTIONS} />
          </Form.Item>
          <Form.Item label="服务费" name="servicePrice" initialValue={0}>
            <InputNumber addonAfter="元" />
          </Form.Item>
          <Form.Item label="地址" name="address">
            <Input />
          </Form.Item>
          <Form.Item label="联系人" name="contacts">
            <Input />
          </Form.Item>
          <Form.Item label="电话" name="phone">
            <Input />
          </Form.Item>
          <Form.Item
            label="经度"
            name="lng"
            rules={[REQUIRED]}
            initialValue={0}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            label="纬度"
            name="lat"
            rules={[REQUIRED]}
            initialValue={0}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item label="半径" name="radius" initialValue={0}>
            <InputNumber addonAfter="米" />
          </Form.Item>
          <Form.Item label="面积" name="area" initialValue={0}>
            <InputNumber addonAfter="平方公里" />
          </Form.Item>
          <Form.Item
            label="围栏类型"
            name="type"
            // rules={[REQUIRED]}
            initialValue={2}
            hidden
          >
            <Select options={TYPE_OPTIONS} />
          </Form.Item>
        </CrudFormLayout>
        <Form.Item label="地图">
          <PointsAndAreaChoose
            ref={mapRef}
            point={record ? { lat: record.lat, lng: record.lng } : undefined}
            points={record?.points}
            onPointChange={(point) => {
              form?.setFieldsValue({
                lng: point.lng,
                lat: point.lat,
              });
            }}
            onPolygonChange={(points) => {
              form?.setFieldsValue({ points });
            }}
            onAreaChange={(area) => {
              form?.setFieldValue('area', area);
            }}
          />
        </Form.Item>
        <Form.Item label="区域点" name="points" rules={[REQUIRED]}>
          <Input maxLength={undefined} />
        </Form.Item>
        <Form.Item label="备注" name="remark">
          <Input.TextArea maxLength={150} />
        </Form.Item>
      </Form>
    </CommonDrawer>
  );
};

export default Save;
